---
type: tutorial
title: Añade contenido dinámico sobre ti
i18nReady: true
description: |-
  Tutorial: Crea tu primer blog con Astro —
  Utiliza variables y renderización condicional en tus páginas de Astro
---
import Checklist from '~/components/Checklist.astro';
import Spoiler from '~/components/Spoiler.astro';
import Blanks from '~/components/tutorial/Blanks.astro';
import Box from '~/components/tutorial/Box.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

Ahora que ya tienes un sitio web multipágina con contenido HTML, ¡es hora de añadir algo de HTML dinámico!

<PreCheck>
  - Definir el título de tu página en el frontmatter y utilízarlo en tu HTML
  - Mostrar elementos HTML condicionalmente
  - Añadir algo de contenido sobre ti
</PreCheck>

Cualquier archivo HTML es un lenguaje de Astro válido. Pero con Astro puedes hacer mucho más que HTML normal.

## Define y utiliza una variable

Abre `about.astro` que debería tener este aspecto:

```astro title="src/pages/about.astro"
---
---
<html lang="es">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Astro</title>
  </head>
  <body>
    <a href="/">Inicio</a>
    <a href="/about/">Sobre mi</a>
    <a href="/blog/">Blog</a>
    <h1>Sobre mi</h1>
    <h2>... ¡y mi nuevo sitio Astro!</h2>

    <p>Estoy trabajando en el tutorial introductorio de Astro. Esta es la segunda página de mi sitio web, ¡y es la primera que he construido yo mismo!</p>

    <p>Este sitio se irá actualizando a medida que vaya completando más partes del tutorial, ¡así que no dejes de visitarlo para ver cómo va mi viaje!</p>
  </body>
</html>
```

<Steps>
1. Añade la siguiente línea de JavaScript en el script frontmatter, entre las **vallas de código**:

    ```astro title="src/pages/about.astro" ins={2}
    ---
    const pageTitle = "Sobre mi";
    ---
    ```

2. Sustituye tanto el título estático "Astro" como el encabezado "Sobre mi" en tu HTML por la variable dinámica `{pageTitle}`.

    ```astro title="src/pages/about.astro" del={5,12} ins={6,13}
    <html lang="es">
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>Astro</title>
        <title>{pageTitle}</title>
      </head>
      <body>
        <a href="/">Inicio</a>
        <a href="/about/">Sobre mi</a>
        <a href="/blog/">Blog</a>
        <h1>Sobre mi</h1>
        <h1>{pageTitle}</h1>
        <h2>... ¡y mi nuevo sitio Astro!</h2>

        <p>Estoy trabajando en el tutorial introductorio de Astro. Esta es la segunda página de mi sitio web, ¡y es la primera que he construido yo mismo!</p>

        <p>Este sitio se irá actualizando a medida que vaya completando más partes del tutorial, ¡así que no dejes de visitarlo para ver cómo va mi viaje!</p>
      </body>
    </html>
    ```

3. Actualiza la vista previa en directo de tu página `/about`.
  
    El texto de tu página debería tener el mismo aspecto, y el título de tu página mostrado en la pestaña de tu navegador debería decir ahora "Sobre mí" en lugar de "Astro". 

    En lugar de escribir el texto directamente en las etiquetas HTML, acabas de **definir y luego utilizar una variable** en las dos secciones de tu archivo `.astro`, respectivamente.

4. Utiliza el mismo patrón para crear un valor `pageTitle` que utilizarás en `index.astro` ("Página de inicio") y `blog.astro` ("Mi blog de Astro aprendizaje"). Actualiza el HTML de estas páginas en ambos sitios para que el título de tu página coincida con el encabezado que aparece en cada página.
</Steps>

:::note[Conclusión]
1. **Define** variables en tu script de Astro usando expresiones JavaScript o TypeScript.
2. **Usa** estas variables en tu plantilla de Astro dentro de llaves `{ }` para decirle a Astro que estás usando algo de JavaScript.
:::

## Escribe expresiones JavaScript en Astro

<Steps>
1. Añade el siguiente JavaScript a tu frontmatter, entre las **vallas de código**:

      (Puedes personalizar el código tú mismo, pero este tutorial utilizará el siguiente ejemplo.)

    ```astro title="src/pages/about.astro" ins={4-9, 11}
    ---
    const pageTitle = "Sobre mi";

    const identity = {
      firstName: "Sarah",
      country: "Canada",
      occupation: "Escritor técnico",
      hobbies: ["fotografia", "observación de aves", "peñarol"],
    };

    const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Redacción de documentos"];
    ---
    ```

2. A continuación, añade el siguiente código a tu plantilla HTML, debajo del contenido existente:

    ```astro title="src/pages/about.astro"
    <p>He aquí algunos datos sobre mí:</p>
    <ul>
      <li>Me llamo {identity.firstName}.</li>
      <li>Vivo en {identity.country} y trabajo como {identity.occupation}.</li>
      {identity.hobbies.length >= 2 && 
        <li>Dos de mis aficiones son: {identity.hobbies[0]} y {identity.hobbies[1]}</li>
      } 
    </ul>
    <p>Mis habilidades son:</p>
    <ul>
      {skills.map((skill) => <li>{skill}</li>)}
    </ul>
    ```
</Steps>

:::note[Conclusiones]
1. Escribir una plantilla Astro es muy parecido a **escribir HTML**, pero puedes incluir expresiones JavaScript dentro de ella.
2. El script Astro frontmatter sólo contiene JavaScript. 
3. Puedes utilizar todos los **operadores lógicos**, **expresiones** y **funciones** modernos de JavaScript en cualquier sección de tu archivo `.astro`. Sin embargo, las llaves son necesarias (sólo) en el cuerpo de la plantilla HTML.
:::

<Box icon="question-mark">

### Pon a prueba tus conocimientos

1. La portada de un archivo `.astro` se escribe en:

    <MultipleChoice>
        <Option>HTML</Option>
        <Option>YAML</Option>
        <Option isCorrect>JavaScript</Option>
    </MultipleChoice>

2. Además de HTML, la sintaxis Astro permite incluir:

    <MultipleChoice>
        <Option isCorrect>Operadores lógicos, expresiones y funciones de JavaScript</Option>
        <Option>YAML</Option>
        <Option>Markdown</Option>
    </MultipleChoice>

3. ¿Cuándo hay que escribir JavaScript entre llaves?
    <MultipleChoice>
        <Option>
          Cuando no estás seguro de si es correcto.
        </Option>
        <Option isCorrect>
          Cuando está dentro de la sección de plantilla HTML de un componente Astro.
          </Option>
        <Option>
          Entre las vallas de código de un componente de Astro.
        </Option>
    </MultipleChoice>
</Box>

## Renderización condicional de elementos

También puedes usar tus variables de script para elegir **si renderizar o no** elementos individuales de tu contenido HTML `<body>`.

<Steps>
1. Añade las siguientes líneas a tu script frontmatter para **definir variables**:

    ```astro title="src/pages/about.astro" ins={13-15}
    ---
    const pageTitle = "Sobre mi";

    const identity = {
      firstName: "Sarah",
      country: "Canada",
      occupation: "Escritor técnico",
      hobbies: ["fotografia", "observación de aves", "peñarol"],
    };

    const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Redacción de documentos"];

    const happy = true;
    const finished = false;
    const goal = 3;
    ---
    ```

2. Añade las siguientes líneas debajo de los párrafos existentes.

    A continuación, comprueba la vista previa en directo en la pestaña de tu navegador para ver lo que se muestra en la página:

    ```astro title="src/pages/about.astro" /:|&&/ "?"
    {happy && <p>¡Estoy feliz de aprender Astro!</p>}

    {finished && <p>¡He terminado este tutorial!</p>}

    {goal === 3 ? <p>Mi objetivo es terminar en 3 días.</p> : <p>Mi objetivo no son 3 días.</p>}
    ```

3. Confirma tus cambios en GitHub antes de continuar. Haz esto cada vez que deseas guardar tu trabajo y actualizar tu sitio web en vivo.
</Steps>

:::tip
La sintaxis de plantillas de Astro es similar a la sintaxis JSX. Si alguna vez te preguntas cómo usar tu script en tu HTML, ¡buscar cómo se hace en JSX es probablemente un buen punto de partida!
:::



<Box icon="question-mark">

### Analiza el patrón

Dado el siguiente script `.astro`:

```astro title="src/pages/about.astro"
---
const operatingSystem = "Linux";
const quantity = 3;
const footwear = "botas";
const student = false;
---
```


Para cada expresión de la plantilla de Astro, ¿puedes predecir el HTML (¡si lo hay!) que se enviará al navegador? Haz clic para ver si has acertado.

1.  `<p>{operatingSystem}</p>`

    <p>
      <Spoiler>`<p>Linux</p>`</Spoiler>
    </p>

2.  `{student && <p>Sigo estudiando.</p>}`

    <p>
      <Spoiler>No se mostrará nada porque `student` se evalúa como falso.</Spoiler>
    </p>

3.  `<p>Tengo {quantity + 8} pares de {footwear}</p>`

    <p>
      <Spoiler>`<p>Tengo 11 pares de botas</p>`</Spoiler>
    </p>

4.  `{operatingSystem === "MacOS" ? <p>Utilizo un Mac.</p> : <p>No utilizo un Mac.</p>}`

    <p>
      <Spoiler>`<p>No utilizo un Mac.</p>`</Spoiler>
    </p>
</Box>

## Checklist

<Box icon="check-list">
<Checklist>
- [ ] Puedo definir valores en archivos `.astro` y utilizarlos.
- [ ] Puedo renderizar condicionalmente elementos HTML.
</Checklist>
</Box>


### Recursos

- [Expresiones dinámicas en Astro](/es/reference/astro-syntax/#expresiones-similares-a-jsx)
